<template>
  <div v-show="flagShowOrhide">
    <el-card>
      <!-- 搜索项组件 -->
      <Search
        :list="formList"
        @submitForm="searchPage"
        @resetForm="resetForm"
        ref="search"
      >
      </Search>
    </el-card>
    <el-card>
      <div style="margin: 0 0 5px 0">
        <el-button type="primary" :icon="Plus" @click="add">新增</el-button>
      </div>
      <!-- 表格 -->
      <el-table
        height="380"
        max-height="100%"
        :data="tableData.list"
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed align="center" />
        <el-table-column
          type="index"
          label="序号"
          width="55"
          fixed
          align="center"
        />
        <el-table-column
          prop="tableCode"
          label="表格编码"
          width="220"
          align="center"
          fixed
        />

        <el-table-column
          prop="formName"
          label="表单名称"
          width="150"
          align="center"
          fixed
        >
          <template #default="scope">
            <div class="modality" @click="selectColumn(scope.row)">
              {{ scope.row.formName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="formType"
          label="表单类型"
          width="130"
          align="center"
          fixed
        />
        <el-table-column
          prop="labelWidth"
          label="文本宽度"
          align="center"
          width="120"
        />
        <el-table-column
          prop="inline"
          label="行内表单"
          width="150"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.inline"
              active-text="开启"
              inactive-text="关闭"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createId"
          label="创建人"
          width="150"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="150"
          align="center"
        />
        <el-table-column
          prop="modifyId"
          label="更新人"
          width="150"
          align="center"
        />
        <el-table-column
          prop="modifyTime"
          label="更新时间"
          width="150"
          align="center"
        />

        <el-table-column label="操作" align="center" width="260" fixed="right">
          <template #default="scope">
            <div class="btn">
              <el-button type="primary" @click="cliEdit">编辑</el-button>
              <el-button type="primary">复制</el-button>
              <el-button type="primary">作废</el-button>
              <el-button type="primary" @click="add">更多</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Paging
        :total="total"
        :currentPage.sync="page.mount"
        :pageSize.sync="page.size"
        @pagination="handlePageChange"
      ></Paging>
    </el-card>
  </div>
  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="50%"
    draggable
    :before-close="handleClose"
  >
    <el-form
      label-width="120"
      :model="formInline"
      :rules="rules"
      ref="ruleFormRef"
      class="demo-form-inline"
    >
      <el-form-item label="表格编码:" prop="tableCode">
        <el-select
          v-model="formInline.tableCode"
          filterable
          clearable
          placeholder="请选择数据库表名"
          style="width: 100%"
        >
          <el-option
            v-for="item in tableOptionsList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="表单名称:" prop="formName">
        <el-input v-model="formInline.formName" placeholder="请输入表单名称" />
      </el-form-item>
      <el-form-item label="表单类型:" prop="formType">
        <el-input v-model="formInline.formType" placeholder="请输入表单类型" />
      </el-form-item>
      <el-form-item label="文本宽度:" prop="labelWidth">
        <el-input v-model="formInline.labelWidth" placeholder="请输入宽度" />
      </el-form-item>
      <el-form-item label="行内表单:">
        <el-switch
          v-model="formInline.inline"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="描述:">
        <el-input
          v-model="formInline.describeStr"
          type="textarea"
          placeholder="请输入描述"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogOk(ruleFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- ===============================================添加详情========================================================== -->
  <div style="margin: 3px 8px" v-show="!flagShowOrhide">
    <el-alert
      title="表头配置"
      type="success"
      description="根据自己所需添加列"
      show-icon
    />
    <!-- 按钮组 -->
    <div style="margin: 5px 0">
      <el-button type="primary" :icon="Plus" @click="addDetails"
        >新增</el-button
      >
      <el-button :icon="Back" @click="getBack">返回</el-button>
    </div>
    <div>
      <el-table
        :data="tableData.detailsList"
        style="width: 100%"
        height="500"
        max-height="100%"
        border
        stripe
      >
        <el-table-column
          type="index"
          width="75"
          label="序号"
          align="center"
          fixed
        />
        <el-table-column
          prop="label"
          label="文本内容"
          width="120"
          align="center"
          fixed
        />
        <el-table-column
          prop="model"
          label="字段key"
          width="150"
          align="center"
          fixed
        />
        <el-table-column
          prop="placeholder"
          label="内容提示"
          width="120"
          align="center"
        />
        <el-table-column prop="type" label="类型" width="120" align="center" />
        <el-table-column
          prop="defaultValue"
          label="默认值"
          width="120"
          align="center"
        />
        <el-table-column
          prop="sequence"
          label="顺序"
          width="120"
          align="center"
        />
        <!-- <el-table-column
          prop="required"
          label="是否必填"
          width="120"
          align="center"
        />
        <el-table-column
          prop="message"
          label="错误信息"
          width="120"
          align="center"
        /> -->

        <el-table-column prop="describes" label="描述" align="center" />
      </el-table>
    </div>
  </div>

  <!-- 添加弹框 -->
  <el-dialog
    v-model="addDialogVisible"
    title="新增"
    width="80%"
    draggable
    :before-close="handleAddClose"
  >
    <!-- inline -->
    <el-form
      label-width="120"
      :model="formAddInline"
      :rules="rules"
      ref="ruleDetailFormRef"
      class="demo-form-inline"
    >
      <el-form-item label="文本:" prop="label">
        <el-input v-model="formAddInline.label" placeholder="请输入文本" />
      </el-form-item>
      <el-form-item label="字段key:" prop="model">
        <el-input v-model="formAddInline.model" placeholder="请输入字段key" />
      </el-form-item>
      <el-form-item label="字段类型:">
        <el-select
          v-model="formAddInline.type"
          filterable
          clearable
          placeholder="请选择字段类型"
          style="width: 100%"
        >
          <el-option label="输入框" value="input" />
          <el-option label="下拉框" value="select" />
          <el-option label="时间框" value="datetimerange" />
          <el-option label="单选按钮" value="radioButton" />
        </el-select>
      </el-form-item>
      <el-form-item label="默认提示:" prop="placeholder">
        <el-input
          v-model="formAddInline.placeholder"
          placeholder="请输入默认提示"
        />
      </el-form-item>
      <el-form-item label="默认值:" prop="defaultValue">
        <el-input
          v-model="formAddInline.defaultValue"
          placeholder="请输入默认值"
        />
      </el-form-item>
      <el-form-item label="是否必填:">
        <el-switch
          v-model="formAddInline.verifyList[0].required"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="必填提示:">
        <el-input
          v-model="formAddInline.verifyList[0].message"
          placeholder="请输入是否必填"
        />
      </el-form-item>
      <el-form-item label="触发方式:">
        <el-select
          v-model="formAddInline.verifyList[0].triggerStr"
          filterable
          clearable
          placeholder="请选择触发方式"
          style="width: 100%"
        >
          <el-option label="失去焦点" value="blur" />
          <el-option label="改变触发" value="change" />
        </el-select>
      </el-form-item>
      <el-form-item label="描述:">
        <el-input
          v-model="formAddInline.describes"
          :rows="2"
          type="textarea"
          placeholder="请输入描述"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogDetailOk(ruleDetailFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// 引入search 组件
import Search from "@/components/basePage/packageSearch/index.vue";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
// 引入form 组件
import Form from "@/components/basePage/packageForm/index.vue";
import Paging from "@/components/basePage/packagePaging/index.vue";
// 引入自定义请求库
import { postAction, getAction } from "@/utils/system/commonUse";
import { Plus, Back } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import axios from "axios";

onMounted(() => {
  getList();
});
const ruleFormRef = ref<FormInstance>();
const ruleDetailFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  tableCode: [{ required: true, message: "请选择表格编码", trigger: "change" }],
  formType: [{ required: true, message: "请填写表单类型", trigger: "blur" }],
  labelWidth: [{ required: true, message: "请填写宽度", trigger: "blur" }],
  formName: [{ required: true, message: "请填写表单名称", trigger: "blur" }],
});
// 路由跳转
const router = useRouter();

// 服务器地址 http://192.168.5.88:8123
const url = reactive({
  addUrl: "/dynamic/dynamicForm/save",
  getListUrl: "/dynamic/dynamicForm/queryDataByPage",
  getOptionsUrl: "/dynamic/dynamicTable/getAllTableCode",
  addDetailUrl: "/dynamic/formDetail/save",
  getDetailsUrl: "/dynamic/formDetail/queryAllFormDetail",
});

// 条数
const total = ref(0);
const page = reactive({
  size: 10, // 长度
  mount: 1, // 页码
});

// 分页器
const handlePageChange = (data: any) => {
  page.mount = data.currentPage;
  page.size = data.pageSize;
  getList();
};

// 表格数据
const tableData = reactive({
  list: Array(),
  detailsList: Array(), //详情
});
// 下拉数据
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const formList = reactive([
  {
    label: "项目名称",
    model: "tgNo",
    placeholder: "请输入项目名称",
  },
  {
    label: "项目名称",
    model: "tgNo51",
    placeholder: "请输入项目名称",
  },
  {
    label: "项目名称",
    model: "tgNo",
    placeholder: "请输入项目名称",
  },
  {
    label: "项目名称",
    model: "tgNo51",
    placeholder: "请输入项目名称",
  },
]);
// 表格编码选项
const tableOptionsList = ref(Array());

const formInline = reactive({
  formType: "", //表单类型
  labelWidth: "", //表单宽度
  inline: false, //是否为行内表单
  tableCode: "", //表格编码
  describeStr: "", //描述
  formName: "", //表单名称
});

// 可以取到子组件传递过来的数据
const searchPage = (ruleForm: any) => {
  console.log(ruleForm, "ruleForm");
};

// 重置表单后回调
const resetForm = () => {};

const handleClose = (done: () => void) => {
  done();
};

/**
 * 获取表格key
 */
const getOptionsList = () => {
  getAction(url.getOptionsUrl)
    .then((data: any) => {
      console.log("getOptionsList===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      tableOptionsList.value = data.data;
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("获取数据失败");
    });
};
/**
 * 获取表格数据
 */
const getList = () => {
  getAction(url.getListUrl, page)
    .then((data: any) => {
      console.log("list===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      tableData.list = data.data.data;
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("获取数据失败");
    });
};

// 单击编辑
const cliEdit = () => {
  router.push("/systemManagement/editformConfiguration");
};
const dialogVisible = ref(false);
/***
 * 添加
 */
const add = () => {
  getOptionsList();
  dialogVisible.value = true;
};

// 确认提交
const dialogOk = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (!valid) {
      return;
    }
    console.log("提交");
    postAction(url.addUrl, formInline)
      .then((data: any) => {
        console.log("添加===>", data);
        if (data.code != 1000) {
          return ElMessage.error(data.msg);
        }
        getList();
        ElMessage({
          message: data.msg,
          type: "success",
        });
        dialogVisible.value = false;
      })
      .catch((err) => {
        console.log(err);
        ElMessage.error("新增失败");
        dialogVisible.value = false;
      });
  });
};

// ===============================================添加详情==============================================================
// 控制显示隐藏
const flagShowOrhide = ref(true);

//弹框
const addDialogVisible = ref(false);
//添加的属性
const formAddInline = reactive({
  dynamicFormId: "", //id
  label: "", //文本
  model: "", //字段key
  placeholder: "", //提示
  type: "", //类型
  defaultValue: "", //默认值
  required: false, //是否必填
  message: "", //必填提示
  trigger: "", //触发方式
  describes: "", //描述
  verifyList: [
    {
      required: true,
      message: "",
      triggerStr: "",
    },
  ],
});
/**
 * 弹框关闭前
 */
const handleAddClose = (done: () => void) => {
  done();
};
// 返回
const getBack = () => {
  flagShowOrhide.value = true;
};
/**
 * 查看列详情
 */
const selectColumn = (row: any) => {
  // 行内id 赋值到内层添加的id
  formAddInline.dynamicFormId = row.id;
  flagShowOrhide.value = false;
  getDetailsList(row.id);
};
/**
 * 单击新增详情
 */
const addDetails = () => {
  addDialogVisible.value = true;
};
/**
 * 添加详情确认
 */
const dialogDetailOk = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (!valid) {
      return;
    }
    console.log("提交");
    postAction(url.addDetailUrl, formAddInline)
      .then((data: any) => {
        console.log("添加===>", data);
        if (data.code != 1000) {
          return ElMessage.error(data.msg);
        }
        getDetailsList(formAddInline.dynamicFormId);
        ElMessage({
          message: data.msg,
          type: "success",
        });
        addDialogVisible.value = false;
      })
      .catch((err) => {
        console.log(err);
        ElMessage.error("新增失败");
        addDialogVisible.value = false;
      });
  });
};
/**
 * 获取详情表格数据
 */
const getDetailsList = (dynamicFormId: string) => {
  getAction(url.getDetailsUrl, { dynamicFormId })
    .then((data: any) => {
      console.log("list===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      tableData.detailsList = data.data;
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("获取数据失败");
    });
};
</script>

<style lang="scss" scoped>
.modality {
  cursor: pointer;
  color: #1890ff;
}
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
  }
  .el-form-item:last-child {
    width: 100%;
  }
}
</style>
